|
JavaScript |
||||||||||||
| Funkce: | |||||||||||||
|
Skripty, které jsme až doposud viděli, se týkali konkrétní události konkrétního objektu (například klepnutí na MyImage). Pokud budeme chtít skript zpřístupnit pro různé události různých objektů, můžeme samozřejmě vytvářet opakované kopie skriptu, každou pro jeden obrázek se svým obslužným kódem. Tento postup ale vede k velkému počtu skriptů, které se obtížně udržují. Když skript oddělíme od konkrétní obsluhy a vytvoříme z něj samostatnou funkci, budeme ji moci použít u více událostí tak, jako to dělá následující kód.
<SCRIPT LANGUAGE="JavaScript"> <!-- |
|||||||||||||
|
|
|||||||||||||
|
function changeImage() { MyImage.src="newpic.gif" } //--> </SCRIPT>
Můžete si všimnout, že jsem odstranil obslužnou část tagu <SCRIPT> (atributy FOR a EVENT) a změnil jsem tělo skriptu na funkci. Funkci jsem pojmenoval changeImage. Tento název se může použít ke spuštění příslušného kódu kdekoliv na stránce.
Protože funkce obvykle provádějí nějaké operace, bývá vhodné uvádět v jejich názvu sloveso. Za názvem funkce následují povinné závorky. Ve složitějších funkcích se v těchto závorkách uvádějí parametry. Prázdné parametry v tomto případě znamenají, že funkci nepředáváme žádné parametry. Dále si všimněte složených závorek { a } za názvem funkce a na konci skriptu. Tyto závorky, které se v JavaScriptu často používají k uzavření samostatných částí kódu, označují začátek a konec bloku kódu, který představuje tělo funkce. Dále potřebujeme událost, která bude funkci aktivovat. Následující kousek HTML obsahuje vloženou obsluhu události:
<BODY> <IMG ID="MyImage" SRC="oldpic.gif" onclick="changeImage()"> </BODY>
Obslužný kód události onclick v tagu <IMG> je funkce changeImage(). Tím se prohlížeči říká, že když uživatel klepne na obrázek, má se volat funkce changeImage. Nyní se podívejme, jak to bude vypadat celé. V kódu 1.5 vidíme kód HTML společně se skriptem. Když skript spustíte, bude se chovat stejně jako kódy 1.3 a 1.4. Nyní je ale skript napsán jako funkce a může být použit jakýmkoliv prvkem, který bude tuto funkci volat. Demonstruji to na nadpisu.
<HTML> <HEAD> <TITLE>Funkce</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage() { MyImage.src="newpic.gif" } //--> </SCRIPT> </HEAD> <BODY> <IMG ID="MyImage" SRC="oldpic.gif" onclick="changeImage()"> <H1 onclick="changeImage()">Klepněte sem nebo na obrázek.</H1> </BODY> </HTML> V tomto kódu voláme jednu funkci z více prvků. Funkce changeImage se volá jednak obrázkem a jednak nadpisem. Ke změně obrázku dojde buď po klepnutí na obrázek nebo na nadpis. V tomto okamžiku už znáte základy toho, jak lze pomocí skriptů pružně a jednoduše modifikovat stránku. Jelikož je tohle ''premiéra'' tohoto webu, vysvětlili jsme si pouze základy JavaScriptu. Postupně při dalších aktualizacích se budou stránky rozrůstat a k nim i přibudou některá další témata.
2.) Skripty v prohlížeči Internet Explorer
Lekce s ukázkami a popisem jsou na úvodu JavaScriptu
|
|||||||||||||
|
|||||||||||||